<%@ page import="com.rimi.project.bean.Book"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入核心标签库 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button id="deleteselect">删除选中</button>
	<table border="1" cellspacing="0">
		<thead>
			<tr>
				<td>
					<input type="checkbox" name="checkall">全选
				</td>
				<td>图书编号</td>
				<td>图书名称</td>
				<td>图书价格</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<!-- 利用循环构造表格行，循环一次构造一行 -->
			<c:forEach items="${books }" var="book">
				<tr>
					<td>
						<input class="check" type="checkbox" data-id="${book.id }">
					</td>
					<td>${book.id }</td>
					<td>${book.bookName }</td>
					<td>${book.price }</td>
					<td>
						<button class="del" name="${book.id }">删除</button>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
	
	<script type="text/javascript">
		$(function(){
			// 删除功能
			$(".del").click(function() {
				// 获取元素的name属性的值
				/* alert($(this).attr("name")); */
				// 利用ajax将删除的图书，发送到bookdelete接口删除
				
				$.ajax({
					url:"${pageContext.request.contextPath }/book/deletebook",
					type:"get",
					data:{
						id:$(this).attr("name")
					},
					success:function(result){
						// 删除完成之后
						/* alert(result); */
						if(result == 'true'){
							alert("删除成功");
						} else{
							alert("删除失败");
						}
						// 强制刷新 获取最新数据结果
						window.location.href="${pageContext.request.contextPath }/book/booklist";
					}
				});
			});
			
			// 删除选中功能
			$("#deleteselect").click(function(){
				// 选中被勾选的checkbox
				console.log($(".check:checked"));
				// 取出所有被选中的id
				// 使用each方法，来遍历选择出来的列表
				var ids = "";
				$(".check:checked").each(function(){
					ids = ids + $(this).attr("data-id") + ",";
				});
				// 利用ajax将拼装好的id列表发送到java后台
				$.ajax({
					url:"${pageContext.request.contextPath}/book/batchdelete",
					type:"post",
					data:{
						idlist:ids
					},
					success:function(result) {
						// 删除完成之后

						if(result == 'true') {
							alert("删除成功");
						} else {
							alert("删除失败");
						}
						// 强制刷新,获取数据库中最新的数据结果
						window.location.href="${pageContext.request.contextPath}/book/booklist";
					}
				});
			});
			
			$("input[name='checkall']").change(function(){
				var checkallstatus = $(this).prop("checked");
				$("input[name='in']").prop("checked",checkallstatus);
			});
		});
	</script>
</body>
</html>